<template>
<view class="container">
	<view style="height:52rpx;width:100%;position:fixed;z-index:100;background-color: #fff;"></view>
	<uni-nav-bar title="分类"  fixed="true" color="#353535" backgroundColor="#fff"></uni-nav-bar>
  <view class="search">
    <navigator url="/pages/search/search" class="input">
      <image class="icon"></image>
      <text class="txt">商品搜索</text>
    </navigator>
  </view>
  <view class="catalog">
    <scroll-view class="nav" scroll-y="true" scroll-with-animation="true" style="height:calc(100vh-200upx)">
		<view :class="'item ' + ( currentCategory.id == item.id ? 'active' : '')" v-for="(item, index) in navList" :key="index"  
		:data-id="item.id" :data-index="index" @tap="switchCate">
		{{item.name}}
		</view>
    </scroll-view>
    <scroll-view class="cate" scroll-y="true" scroll-with-animation="true" style="height:calc(100vh-200upx)" 
	 @scrolltoupper="scrollHandler">
        <view class="hd">
            <text class="line"></text>
            <text class="txt">{{currentCategory.name}}</text>
        </view>
        <view class="bd">
            <navigator v-for="(item, index) in productList" :key="index" :url="'/pages/goods/goods?id=' + item.id" class="item ">
                <image class="icon" :src="item.pic"></image>
                <text class="txt">{{item.name}}</text>
            </navigator>
        </view>
    </scroll-view>
  </view>
</view>
</template>

<script>
	import  uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
var util = require("../../utils/util.js");
var api = require("../../config/api.js");
const app = getApp();

export default {
  data() {
    return {
      navList: [],
      // categoryList: [],
      currentCategory: {},
      productList: [],
      scrollLeft: 0,
      scrollTop: 0,
      scrollHeight: 0,
	  categoryId: 0
    };
  },

  components: {uniNavBar},
  props: {},
  onShareAppMessage: function (res) {
    return {
      title: '琅琊严选',
      path: '/pages/index/index'
    };
  },
  onLoad: function (options) {
	  this.categoryId = app.globalData.categoryId;
  },
  onShow: function () {
    // 页面渲染完成
    this.getCatalog();
  },
  onHide: function () {
    // 页面隐藏
    app.globalData.categoryId = 0;
  },
  onPullDownRefresh: function () {
    uni.showNavigationBarLoading(); //在标题栏中显示加载
  
    this.getCatalog(); //模拟加载
  
    setTimeout(function () {
      // complete
      uni.hideNavigationBarLoading(); //完成停止加载
  
      uni.stopPullDownRefresh(); //停止下拉刷新
    }, 1500);
  },
  methods: {
    getCatalog: function () {
      let that = this;
      uni.showLoading({
        title: '加载中...'
      });
      util.request(api.CatalogList, {id:this.categoryId}).then(function (res) {
        if (res.errno == 0) {
          if (that.categoryId > 0) {
            console.log("choose id = " + that.categoryId);
            that.setData({
              navList: res.data.categoryList
            });
            that.choose(that.categoryId);
          } else {
            that.setData({
              navList: res.data.categoryList,
              currentCategory: res.data.categoryList[0]
            });
             that.getCurrentCategoryProducts(res.data.currentCategory.id);
          }
        }

        uni.hideLoading();
      }); // console.log("data.currentCategory=="+JSON.stringify(this.data.currentCategory))
    },
	//获得当前类产品
    getCurrentCategoryProducts: function (id) {
      let that = this;
      util.request(api.CatalogCurrent, {
        id: id
      }).then(function (res) {
        if (res.errno == 0) {
          that.productList = res.data;
        }
        uni.hideLoading();
      });
    },
    getCurrentCategory: function (currentCatoryId) {
      var that = this;
      let returnData = null;
      that.navList.forEach(element => {
        if (element.id == currentCatoryId) {
          returnData = element;
        }
      });
      return returnData;
    },
    getNextCategory: function (currentCatoryId) {
      let that = this;
      let flag = false;
      let returnData = null;
      that.navList.forEach(element => {
        if (flag) {
          returnData = element;
          flag = false;
        } else {
          if (element.id == currentCatoryId) {
            flag = true;
          }
        }
      });
      return returnData;
    },
	// getPreCategory: function (currentCatoryId) {
	// 	let that = this;
	// 	let flag = false;
	// 	let returnData = null;
	// 	that.navList.forEach(element => {
	// 		if (flag) {
	// 		  returnData = element;
	// 		  flag = false;
	// 		} else {
	// 		  if (element.id == currentCatoryId) {
	// 		    flag = true;
	// 		  }
	// 		}
	// 	})
	// },
    switchCate: function (event) {
	  this.productList = {};
      var id = event.currentTarget.dataset.id;
      this.choose(id);
    },
    scrollHandler: function (e) {
      var nextCategory = this.getNextCategory(this.currentCategory.id);

      if (nextCategory) {
        this.choose(nextCategory.id);
      }
    },
	// scrollupHandler:function(e){
	// 	var preCategory = this.getPreCategory(this.currentCategory.id);
	// 	if(preCategory) {
	// 		this.choose(preCategory.id);
	// 	}
	// },
    choose: function (categoryId) {
      var currentCategory = this.getCurrentCategory(categoryId);
	  console.log("==currentCategory=="+JSON.stringify(currentCategory))
      this.setData({
        currentCategory: currentCategory
      });
      this.getCurrentCategoryProducts(currentCategory.id);
    }
  }
};
</script>
<style>
page {
  height: 100%;
}

.container {
  background: #ffffff;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.search {
  height: 88rpx;
  width: 100%;
  padding: 0 30rpx;
  background: #fff;
  display: flex;
  align-items: center;
}

.search .input {
  width: 690rpx;
  height: 56rpx;
  background: #f1f1f1;
  border-radius: 25rpx;
  display: flex;
  align-items: center;
  justify-content: left;
}

.search .icon {
  background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png") center no-repeat;
  background-size: 100%;
  width: 24rpx;
  height: 24rpx;
  margin-left: 20rpx;
}

.search .txt {
  height: 24rpx;
  line-height: 24rpx;
  color: #b2b2b2;
  padding-left: 12rpx;
  font-size: 24rpx;
}

.catalog {
  flex: 1;
  width: 100%;
  background: #fff;
  display: flex;
  /* border-top: 1px solid #fafafa; */
  margin-top: 30rpx;
}

.catalog .nav {
  width: 180rpx;
  height: 100%;
  background: #f1f1f1;
}

.catalog .nav .item {
  text-align: left;
  line-height: 100rpx;
  width: 100%;
  height: 100rpx;
  color: #888888;
  font-size: 26rpx;
  padding-left: 30rpx;
  /* border-left: 6rpx solid #fff; */
}

.catalog .nav .item.active {
  color: #b28850;
  font-size: 26rpx;
  background: #fff;
  /* border-left: 6rpx solid #ab2b2b; */
}

.catalog .cate {
  /* border-left: 1px solid #fafafa; */
  flex: 1;
  height: 100%;
  padding: 0 10rpx 0 30rpx;
}

.banner {
  display: block;
  height: 222rpx;
  width: 100%;
  position: relative;
}

.banner .image {
  position: absolute;
  top: 30rpx;
  left: 0;
  border-radius: 4rpx;
  height: 192rpx;
  width: 100%;
}

.banner .txt {
  position: absolute;
  top: 30rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  left: 0;
  height: 192rpx;
  line-height: 192rpx;
  width: 100%;
}

.catalog .hd {
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  margin-top: 20rpx;
}

.catalog .hd .txt {
  font-size: 28rpx;
  color: #353535;
  margin-left: 12rpx;
}

.catalog .hd .line {
  background-color: #b28850;
  height: 36rpx;
  width: 4rpx;
}

.catalog .bd {
  height: auto;
  width: 100%;
  overflow: hidden;
  margin-top: 30rpx;
}

.catalog .bd .item {
  display: block;
  float: left;
  /* height: 216rpx; */
  width: auto;
  margin: 0 20rpx 40rpx 0;
}

.catalog .bd .item.last {
  margin-right: 0;
}

.catalog .bd .item .icon {
  height: 156rpx;
  width: 156rpx;
  border-radius: 12rpx;
}

.catalog .bd .item .txt {
  display: block;
  text-align: center;
  font-size: 24rpx;
  color: #333;
  /* height: 72rpx; */
  width: 156rpx;
  margin-top: 24rpx;

  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
}

</style>